<template>
	<div class="index">
		<comHeader></comHeader>
		<div class="container">
			<lunbo v-bind:imglist="imgsrc"></lunbo>
			<div class="dd">
				<switchbox></switchbox>
			</div>
			<div class="tt">
				<tbox></tbox>
			</div>
			<!-- <input v-focus type="text" name="" v-model="focusp"> -->
			<p>{{focusp | capitalize}}</p>
			<input type="text" name="" v-model="aa">
			<p>{{aa | fuhao}}</p>
			<h3>动态组件切换</h3>
			<switchzj></switchzj>
		</div>
		<div class="container">
			<h3>echarts图表插件</h3>
		    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    	    <div id="myChart" class="chart"></div>
		</div>
	</div>
</template>

<script>
	import lunbo from './lunbo'
	import switchbox from './switch_box'
	import switchzj from './switch_zj'
	import tbox from './t_box'
	import qs from 'qs'
	import comHeader from './comHeader'

	export default {
		name: "index",
		directives:{
	      focus: {
	        // 指令的定义
	        inserted: function (el) {
	          // 聚焦元素
	          el.focus()
	        }
	      }
	    },
	    filters: {
		  capitalize: function (value) {
		    if (!value) return ''
		    value = value.toString()
		    return value.charAt(0).toUpperCase() + value.slice(1)
		  },
		  fuhao: function(value) {
		  	if(isNaN(value)){
		  		alert("你输入的不是数字")
		  	}else{
		  		return "￥" + value;
		  	}
		  }
		},
		data(){
			return{
				aa: 0,
				focusp:'',
				month:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
				monthvalue:[5, 20, 36, 10, 10, 20],
				imgsrc:[
					'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523358705513&di=16cd312a3c50a7b1515f613462d980ae&imgtype=0&src=http%3A%2F%2Feasyread.ph.126.net%2Fc23DPvUYostVv3cP55kRSA%3D%3D%2F7917034575313850131.jpg',
					'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523358733178&di=633993f8baa773b24f34cc5f491be2bd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D608211dfad86c9171c0e5a7aa1541aba%2F7e3e6709c93d70cfce8f5f2af2dcd100baa12ba4.jpg',
					'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523358786428&di=671c65df9581719a11700c26bad66e46&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fitem%2F201503%2F31%2F20150331235834_3UsZd.jpeg'
				]
			}
		},
		methods:{
			drawLine(){
	        // 基于准备好的dom，初始化echarts实例
	        let myChart = this.$echarts.init(document.getElementById('myChart'))
	        // 绘制图表
	        myChart.setOption({
	            title: { text: '' },
	            tooltip: {},
	            xAxis: {
	                data: this.month
	            },
	            yAxis: {},
	            series: [{
	                name: '销量',
	                type: 'bar',
	                data: this.monthvalue
	            }]
	        });
          }
		},
		components: {
		    "lunbo": lunbo,
		    "switchbox": switchbox,
		    "tbox": tbox,
		    "switchzj": switchzj,
		    "comHeader": comHeader
		},
		created(){
			this.$http.get("http://www.wwtliu.com/sxtstu/blueberrypai/getIndexInteresting.php")
			.then(res => {
				console.log(res)
			})
			.catch(error => {
				console.log(error)
			})
		},
		mounted(){
          this.drawLine();
      }
	}
</script>

<style scoped>
	.dd{
		width: 560px;
		height: 310px;
		float: left;
		margin-top: 20px;
	}
	.tt{
		width: 560px;
		height: 310px;
		float: right;
		margin-top: 20px;
	}
	#myChart{
		width: 100%;
		height: 400px;
	}
</style>